<template>
	<view class="">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>

		<mescroll-body  height="80%" bottom="20%" ref="mescrollRef" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="">
				<view class="list-box " v-if="list">
					<view class=" list-item" v-for="(item,index) in list" :key="index"
						@click="jumpTo('/pages/server/property/inviteCode?id='+item.id)">
						<view class=" flex  list-item-content flex-wrap">
							<view class="basis-xll  align-center flex justify-between">
								访客姓名：{{item.name}}
								<view class="fail-text" v-if="item.status==0">
									未到访
								</view>
								<view class="success-text" v-if="item.status==1">
									已到访
								</view>
								<view class="success-text" v-if="item.status==2">
									已过期
								</view>
							</view>
							<view class="basis-xll  align-center flex">
								访客车辆：{{item.car_number}}
							</view>
							<view class=" basis-xll flex align-center">
								<view class="left-text">
									计划到访时间：
								</view>
								<view class="right-text">
									{{item.plan_time}}
								</view>
							</view>
							<view class="basis-xll  align-center flex">
								实际到访时间：{{item.reality_time}}
							</view>
						</view>


					</view>




				</view>



			</view>




		</mescroll-body>

		<view class="button-box middle" @click="jumpTo('/pages/server/property/createInvite')">
			访客邀请
		</view>
	</view>
</template>

<script>
	import MescrollBody from "../components/mescroll-uni/mescroll-body.vue"
	import cuCustom from '../components/header/cu_custom.vue'
	import MescrollMixin from "../components/mescroll-uni/mescroll-mixins.js";
	import {
		getInviteList
	} from "@/static/server/api/api.js"
	export default {
		mixins: [MescrollMixin],
		components: {
			cuCustom,
			MescrollBody,
		},
		data() {
			return {
				list: null,
				title: "访客邀请",
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 5 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 无数据 ~', // 提示
						btnText: '去看看',
						textNoMore: '-- 没有更多了 --'
					},

				},
			}
		},
		methods: {
			jumpTo(path) {
				uni.navigateTo({
					url: path
				})
			},

			/**
			 * 加载数据
			 * @param {Object} page
			 */

			upCallback(page) {
				//联网加载数据


				getInviteList(page.num, page.size).then(curPageData => {
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(curPageData.length);
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(curPageData); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}


	}
</script>

<style scoped>
	@import url("@/static/server/css/basic.css");

	.bg-F9F9F9 {
		background-color: #F9F9F9;

	}

	.list-box {
		margin-left: 18rpx;
		margin-right: 18rpx;

	}

	.list-box .list-item {
		margin-top: calc(100vw*(14/375));
		/* width: calc(100vw*(339/375)); */
		min-height: calc(100vw*(111/375));
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 100);

		font-size: 28rpx;

		box-shadow: 0px 4rpx 20rpx 8rpx rgba(196, 196, 196, 0.14);
		font-family: Arial;
		border: 2rpx solid rgba(236, 236, 236, 100);
		color: rgba(102, 102, 102, 100);

		font-family: PingFangSC-regular;
		padding: 32rpx 14rpx;
		line-height: 32rpx;
	}

	.list-item-content {

		min-height: calc(100vw*(79/375));
	}

	.fail-text {
		color: rgba(255, 0, 0, 100);
	}

	.success-text {
		color: rgba(123, 123, 123, 100);
	}

	.button-box {
		margin-left: 36rpx;
		border-radius: 16rpx;
		background-color: rgba(57, 81, 251, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 32rpx;
		text-align: center;
		font-family: SourceHanSansSC-regular;
		height: calc(100vw*(48/375));
		width: calc(100vw*(339/375));
		position: fixed;
		z-index: 99;
		bottom: calc(100vw*(53/375));
	}

	.left-text {
		white-space: nowrap;
	}

	.right-text {
		word-break: break-all;
	}
</style>
